<template>
  <div>
    <el-tabs type="border-card" v-model="selectStatus" @tab-change="getOrderListByStatusFun(selectStatus)">
      <el-tab-pane :name="0" label="待支付">
      </el-tab-pane>
      <el-tab-pane :name="1" label="待发货">
      </el-tab-pane>
      <el-tab-pane :name="2" label="待收货">
      </el-tab-pane>
      <el-tab-pane :name="3" label="已完成">
      </el-tab-pane>
      <el-tab-pane :name="4" label="已关闭">
      </el-tab-pane>
      <el-tab-pane :name="5" label="失效订单">
      </el-tab-pane>
      <el-table :data="orderList" style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="loading" element-loading-text="努力加载中..."
                @cell-mouse-enter="prompt"
      >
        <template #empty>
          <el-image :src="require('@/assets/icon/nodata.png')"></el-image>
          <div>你还没有下单记录...
            <router-link to="/home">快去商城逛逛吧</router-link>
          </div>
        </template>
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="orderSn" label="订单编号"/>
        <el-table-column prop="memberUsername" label="用户名" width="100"/>
        <el-table-column prop="payAmount" label="总金额" width="180">
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="100"/>
        <el-table-column label="状态">
          <template #default="scope">
            <span v-if="scope.row.status==0">待付款</span>
            <span v-else-if="scope.row.status==1">待发货</span>
            <span v-else-if="scope.row.status==2">待收货</span>
            <span v-else-if="scope.row.status==3">已完成</span>
            <span v-else-if="scope.row.status==4">已关闭</span>
            <span v-else-if="scope.row.status==5">已失效</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="goToDetail(scope.row.id)">查看详情</el-button>
            <el-button type="danger" @click="goToReceive(scope.row.id)" v-if="scope.row.status==2">确认收货</el-button>
            <el-button type="danger" @click="goToAppraise(scope.row.id)" v-if="scope.row.status==3">去评价</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="pageInfo.pageNum"
            :page-size="pageInfo.pageSize"
            :disabled="disabled"
            :background="background"
            layout="total, prev, pager, next"
            :total="pageInfo.total"
        />
      </div>
    </el-tabs>
  </div>
</template>

<script setup>
import {getOrderListByStatus, orderReceive} from '@/api/order'
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";

let router = useRouter()
let orderList = ref([])
let selectStatus = ref(0)
let pageInfo = reactive({
  pageNum: 1,
  pageSize: 8,
  total: 0
})

function getOrderListByStatusFun(status) {
  getOrderListByStatus(pageInfo, status).then(res => {
    orderList.value = res.data.records
    pageInfo.total = res.data.total - 0
  })
}

function goToReceive(orderId) {
  orderReceive(orderId).then(res=>{
    //  前往评价
    router.push({
      path:'/commodity-appraise',
      query:{orderId}
    })
  })

}
function goToAppraise(orderId){
  router.push({
    path:'/commodity-appraise',
    query: {orderId}
  })
}
function goToDetail(orderId) {
  router.push({query: {orderId}, path: '/order-detail'})
}

onMounted(() => {
  getOrderListByStatusFun(0)
})

</script>

<style scoped>

</style>
